<div class="nav">
    <a href="{:U('index')}">规格列表</a>
    <a class="sel" href="{:U('add')}">添加规格</a>
</div>
<div class="add">
    <form method="post" action="" >
        <table class="table_add">
            <tr>
                <td width="100px">规格名称</td>
                <td><input class="input1" type="text" name="spec_name" id="spec_name" value="" style="width:140px" /> </td>
            </tr>
            <tr>
                <td width="100px">规格类型</td>
                <td><select name="spec_type" id="spec_type" class="sel1">
                        <option value="1">文字</option>
                       
                    </select>
                </td>
            </tr>
            <tr>
                <td width="100px">规格选项</td>
                <td>
                    <table class="table_sub_sel">
                        <thead>
                        <tr><td colspan="3"><input type="button" class="btn1" value="新增" onclick="add_sel()" /></td></tr>
                        <tr><td>选项值</td><td class="pic">图片</td><td>操作</td></tr>
                        </thead>
                        <tbody id="tr_sel_body">
                        </tbody>
                    </table>
                    <input type="hidden" name="spec_num" id="spec_num" value="0" />
                </td>
            </tr>
            <tr>
                <td width="100px">顺序编号</td>
                <td><input class="input1" type="text" name="order_id" id="order_id" value="1000" style="width:60px" /> <span class="msg">*</span></td>
            </tr>
            <tr>
                <td width="100px">是否启用</td>
                <td><select name="is_enable" id="is_enable" class="sel1">
                        <option value="1">启用</option>
                        <option value="0">不启用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="btn1" value="提 交" /> &nbsp; <input class="btn4" type="reset" value="重 置" /> &nbsp; <input class="btn3"  type="button" onclick="window.history.back()" value="返 回" /></td>
            </tr>
        </table>
    </form>
    <script src="__PUBLIC__/common/artDialog4.1.7/artDialog.source.js?skin=blue"></script>
    <script src="__PUBLIC__/common/artDialog4.1.7/plugins/iframeTools.source.js"></script>
    <script type="text/javascript">
        //增加选项
        function add_sel() {
            var count_sel = $("#spec_num").val();
            count_sel++;
            var tr_html = '<tr id="tr_inner_'+count_sel+'"><td><input type="text" id="sel_name_'+count_sel+'" name="sel_name[]" /></td>';
                tr_html += '<td class="pic"><input type="button" id="btn_spec_pic_'+count_sel+'" class="btn3" value="上传图片" onclick="upload_img_frame(\'spec_pic_'+count_sel+'\',\'spec\',\'30\',\'30\')" />';
                tr_html += '<img src="" style="display:none" id="pic_spec_pic_'+count_sel+'" width="30px" height="30px" onclick="upload_img_frame(\'spec_pic_'+count_sel+'\',\'spec\',\'30\',\'30\')" />';
                tr_html += '<input type="hidden" name="sel_pic[]" id="spec_pic_'+count_sel+'" value="" /></td>';
                tr_html += '<td><img style="cursor:pointer" alt="删除" onclick="del_sel('+count_sel+')" src="__PUBLIC__/admin/images/no1.gif" /></td></tr>';
            $("#tr_sel_body").append(tr_html);
            $("#spec_num").val(count_sel);
            change_spec_type();
        }
        //删除选项
        function del_sel(i) {
            $("#tr_inner_"+i).remove();
        }
        //增加第一个选项
        add_sel();
        //弹出选择图片
        function upload_img_frame(id,path,thumbw,thumbh) {
            art.dialog.open("{:U('Index/uploadimgframe')}?path="+path+"&thumbw="+thumbw+"&thumbh="+thumbh+"&parent_id="+id, {title: "选择图片", width: "300px"});
        }
        //选择上传图片后回调事件
        function show_upload_img(id,fileurl) {
            $("#"+id).val(fileurl);
            $("#pic_"+id).attr('src',fileurl);
            $("#pic_"+id).show();
            $("#btn_"+id).hide();
        }
        //类型变化绑定事件
        $("#spec_type").change(function(){
            change_spec_type();
        });
        //类型变化执行事件
        function change_spec_type() {
            var spec_type = $("#spec_type").val();
            if(spec_type == "2") {
                $("td.pic").show();
            } else {
                $("td.pic").hide();
            }
        }
    </script>
</div>
